<template>
  <div class="p-24" style="overflow:auto">
    <a-card>
      <a-typography-title :level="4">账户信息</a-typography-title>
      <div class="d-flex">
        <!-- <a-image :width="200" objectFit="cover" :src="detail.avatar" /> -->
        <div class="msg-list">
          <div>
            <span class="label">账号状态</span>
            <span class="val">{{ detail.status == 0 ? '正常' : '禁用' }}</span>
          </div>
          <div>
            <span class="label">注册时间</span>
            <span class="val">{{ detail.loginTime }}</span>
          </div>
          <!-- <div>
            <span class="label">性别</span>
            <span class="val">{{
              detail.sex == 0 ? "女" : detail.sex == 1 ? "男" : "未知"
            }}</span>
          </div> -->
          <!-- <div>
            <span class="label">年龄段</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
          <!-- <div>
            <span class="label">常用套餐</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
        </div>
      </div>
    </a-card>
    <a-card>
      <a-typography-title :level="4">用户信息</a-typography-title>
      <div class="d-flex">
        <!-- <a-image :width="200" objectFit="cover" :src="detail.avatar" /> -->
        <div class="msg-list">
          <div>
            <span class="label">User ID</span>
            <span class="val">{{ detail.id }}</span>
          </div>
          <div>
            <span class="label">微信号</span>
            <span class="val">{{ detail.nickname }}</span>
          </div>
          <!-- <div>
            <span class="label">手机号</span>
            <span class="val">{{ detail.phone }}</span>
          </div> -->
          <!-- <div>
            <span class="label">性别</span>
            <span class="val">{{
              detail.sex == 0 ? "女" : detail.sex == 1 ? "男" : "未知"
            }}</span>
          </div> -->
          <!-- <div>
            <span class="label">年龄段</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
          <!-- <div>
            <span class="label">常用套餐</span>
            <span class="val">{{ detail.src }}</span>
          </div> -->
        </div>
      </div>
    </a-card>

    <a-card>
      <a-typography-title :level="4">消费数据</a-typography-title>
      <h3 style="margin-bottom:15px">次卡剩余次数</h3>
      <BasicTable ref="basicTableRef1" :immediate="false" :columns="columns1" :query-params="queryData1" :apiFetch="postClientUserRemainPage">
      </BasicTable>
      <h3 style="margin:15px 0">消费记录</h3>
      <BasicTable ref="basicTableRef2" :immediate="false" :columns="columns2" :query-params="queryData2" :apiFetch="postClientUserPackagePage">
      </BasicTable>
    </a-card>

  </div>
</template>

<script setup>
import { postClientUserDetail, postClientUserRemainPage, postClientUserPackagePage } from "@/api/common";
const route = useRoute();
const columns1 = [

  {
    title: "套餐类型",
    dataIndex: "type",
    key: "type",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => (record.type == 0 ? "单次卡" : "多次卡"),
  },
  {
    title: "套餐名称",
    dataIndex: "name",
    key: "name",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "套餐金额",
    dataIndex: "payFee",
    key: "payFee",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "已使用次数",
    dataIndex: "usedNum",
    key: "usedNum",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "剩余使用次数",
    dataIndex: "remainNum",
    key: "remainNum",
    width: "150px",
    ellipsis: true,
  },


];
const columns2 = [

  {
    title: "套餐类型",
    dataIndex: "type",
    key: "type",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => (record.type == 0 ? "单次卡" : "多次卡"),
  },
  {
    title: "套餐名称",
    dataIndex: "name",
    key: "name",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "消费金额",
    dataIndex: "payFee",
    key: "payFee",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "消费时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },


];
const basicTableRef1 = ref(null);
const basicTableRef2 = ref(null);
const queryData1 = reactive({

});
const queryData2 = reactive({

});
const detail = ref({});
onMounted(() => {
  queryData1.clientUserId = route.query.id;
  queryData2.clientUserId = route.query.id;
  basicTableRef1.value.fetch();
  basicTableRef2.value.fetch();
  postClientUserDetail({
    id: route.query.id,
  }).then((res) => {
    detail.value = res.data;
  });
});
</script>

<style lang="less" scoped>
.msg-list {
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-left: 24px;
  .label {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    width: 100px;
    margin-right: 20px;
    // text-align-last: justify;
  }
  .val {
    font-size: 16px;
  }
}
</style>
